<template>
  <div class="contentForm">
    <el-form :label-position="labelPosition" 
              label-width="80px"
              :rules="rules"
              class="demo-ruleForm" 
              :model="formLabelAlign">
      <el-form-item label="标题" prop="name">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="文档类别" prop="categories" >
        <el-select v-model="formLabelAlign.categories" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <!-- <el-input v-model="formLabelAlign.region" style="width:300px"></el-input> -->
      </el-form-item>
      <el-form-item label="日期" prop="date" style="width:300px">
        <el-date-picker format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择日期" v-model="formLabelAlign.date" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="详细内容" prop="detailtext">
        <vue-ueditor-wrap v-model="formLabelAlign.msg" :config="myConfig"></vue-ueditor-wrap>
      </el-form-item>
    </el-form>
    <div class="backButton">
      <el-button size="primary"  @click="getContent">保存</el-button>
      <el-button size="primary"  @click="goback">返回</el-button>     
    </div>
         
  </div>
</template>

<script>
// 1、引入VueUeditorWrap组件
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
import { constants } from 'crypto';
  export default{
      name: 'hello',
      data(){
        return {
          
           myConfig: {
            // 如果需要上传功能,找后端小伙伴要服务器接口地址
            serverUrl: 'http://35.201.165.105:8000/controller.php',
            // 你的UEditor资源存放的路径,相对于打包后的index.html
            UEDITOR_HOME_URL: './UEditor/',
            // 编辑器不自动被内容撑高
            // autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 300,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 关闭自动保存
            enableAutoSave: false
          },
          labelPosition: 'right',
          formLabelAlign: {
            name: '',
            categories: '',
            msg: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入标题', trigger: 'blur' },
              { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
            ],
            categories: [
              { required: true, message: '请选择文档类别', trigger: 'change' }
            ],
            date: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            detailtext: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ]
          }
        }
      },
      created(){
        // let aa=this.$route.query.id
        // let bb=this.$route.params.id
        // console.log(aa)
        // console.log(bb)
        let aa=window.s_id
        console.log(aa)
      },
      // mounted(){
      //   let bb=this.$route.params.id
      //   console.log(bb)
      // },

      components: {
        VueUeditorWrap
      },
      methods: {
        //获取文档内容
        getContent: function(){
          alert(this.formLabelAlign.msg)
        },
        //返回按钮
        goback() {
        console.log(this.formLabelAlign);
        }
      }
  }

</script>
<style lang="scss">
.contentForm {
  margin: 15px 0;
  width: 80%;
  padding-bottom: 50px;
  .backButton {
    position: fixed;
    bottom: 100px;
    right: 50px;
  }
}
</style>